<template>
  <div class="customer">
    <ListTab v-model="activeId" :show-header="!showMobilePage" :tabs="tabListData" is-table @tabClick="handleTabClick"/>
    <div :class="{'mobile-table mobile-pt mobile-el-pagination mobile-min-height':showMobilePage}" class="product-container min-fill-page">
      <div :style="showMobilePage?{margin: '0 10px 16px 10px'}:''">
        <dataDisplay
          v-if="listCount"
          :data-list="displayData"
          style="margin-bottom:16px;"
        />
      </div>
      <div v-if="!showMobilePage" style="position:relative;margin-bottom:16px;">
        <FilterInput
          v-model="filterInput"
          :filter-list="filterList"
          show-search-btn
          class="FilterTool"
          @handelClick="queryClick"
          @queryEmpty="queryEmpty"
          @filterTagStatus="filterTagStatus" />
        <div class="current-user-action-box">
          <el-checkbox v-model="isDefective" style="margin-right: 20px;" @change="queryClick" >残次品</el-checkbox>
          <el-checkbox v-model="isPending" @change="queryClick" >待盘点</el-checkbox>
        </div>
        <div class="table-top-opeator-bar">
          <createBtn
            v-if="hasRouteAuth('mengli:inventory:detailAdd')"
            text="添加"
            style="margin-right:10px;"
            class="btn-right-item"
            @click.native="showStockOperationDialog(null)"/>
          <MoreOpeator
            ref="btnGroupRef"
            :list="[{
              label:'导入库存',
              importApi:'/admin/mengli/inventory/list/inventoryLog/import',
              callback:fetchData,
              type: 'import',
              auth: hasRouteAuth('mengli:inventory:import')
            }, {
              label:'导出库存',
              exportApi:'/admin/mengli/inventory/detail/log/export',
              exportName:'入库记录',
              refName: 'exportRef',
              isBeforeExport: true,
              beforeExport: beforeExport,
              type: 'export',
              auth: hasRouteAuth('mengli:inventory:export')
            }, {
              label: '模板下载',
              type: 'export',
              exportApi:'/admin/mengli/inventory/list/inventoryLog/template',
              exportName: '导入模板'
            }]"
          />
        </div>
      </div>
      <div class="table-list">
        <div v-loading="listLoading" style="min-height: 300px;">
          <u-table
            v-if="list.items.length > 0"
            ref="customerTableRef"
            :data="list.items"
            :border="true"
            :row-height="rowHeight()"
            :height="setTableHeight"
            beautify-table
            header-drag-style
            use-virtual
            class="fb-table"
            element-loading-text="加载中..."
            empty-text="暂无数据"
            header-cell-class-name="order-data-header-cell"
            fit
            hightlight-current-row
            @sort-change="sortMethod">
            <u-table-column align="left" label="SKU编码" min-width="120">
              <template slot-scope="scope">
                <el-tooltip v-if="scope.row.code" class="item" placement="top" effect="dark">
                  <div slot="content" style="max-width: 200px;">{{ scope.row.code }}</div>
                  <div class="ellipsis link" @click="goDetail(scope.row.relatedId)">{{ scope.row.code }}</div>
                </el-tooltip>
                <div v-else>--</div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="标题" min-width="120">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.title" />
              </template>
            </u-table-column>
            <u-table-column align="right" label="成本价(元)" min-width="120" sortable="custom" prop="cost">
              <template slot-scope="scope">
                <PriceColumn :real-val="scope.row.cost" :price="scope.row.cost" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="入库数量" min-width="100" sortable="custom" prop="inventoryCount">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.inventoryCount" />
              </template>
            </u-table-column>
            <u-table-column align="right" label="总成本(元)" min-width="120" sortable="custom" prop="totalCosts">
              <template slot-scope="scope">
                <PriceColumn :real-val="scope.row.totalCosts" :price="scope.row.totalCosts" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="包含残次品" min-width="100">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.defectiveCount" />
              </template>
            </u-table-column>
            <u-table-column align="right" label="物流成本(元)" min-width="110">
              <template slot-scope="scope">
                <PriceColumn :real-val="scope.row.logisticsCost" :price="scope.row.logisticsCost" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="是否包含物流成本" min-width="140">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.hasLogisticsCost | hasCostFilter" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="商品属性" min-width="100">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.type" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="供应商" min-width="120">
              <template slot-scope="scope">
                <el-tooltip v-if="scope.row.supplier" class="item" placement="top">
                  <div slot="content" style="max-width: 200px;">{{ scope.row.supplier }}</div>
                  <div
                    v-if="hasRouteAuth('mengli:supplier:read')"
                    class="ellipsis link"
                    @click="goMengliSuppliers(scope.row.supplier)">
                    {{ scope.row.supplier }}
                  </div>
                  <div v-else class="ellipsis">{{ scope.row.supplier }}</div>
                </el-tooltip>
                <div v-else>--</div>
              </template>
            </u-table-column>
            <u-table-column v-if="hasRouteAuth('crm:contract:read')" align="left" label="供应商合同" min-width="140">
              <template slot-scope="scope">
                <div v-if="scope.row.supplier" class="link" @click="goContractManagement(scope.row.supplier)">查看</div>
                <div v-else>--</div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="入库类型" min-width="140">
              <template slot-scope="scope">
                <div>{{ getStockType(scope.row) }}</div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="IP形象" min-width="150">
              <template slot-scope="scope">
                <el-tooltip class="item" placement="top" effect="dark">
                  <div slot="content" style="max-width: 200px;">{{ `${scope.row.ipName || '--'}/${scope.row.ipSeriesName || '--'}` }}</div>
                  <div class="ellipsis">{{ `${scope.row.ipName || '--'}/${scope.row.ipSeriesName || '--'}` }}</div>
                </el-tooltip>
              </template>
            </u-table-column>
            <u-table-column align="left" label="仓库" min-width="100">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.repositoryName" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="备注" min-width="120">
              <template slot-scope="scope">
                <div class="remarks-container">
                  <el-tooltip
                    v-if="scope.row.remark"
                    :content="scope.row.remark"
                    class="item"
                    placement="top">
                    <div class="remarks">{{ scope.row.remark }}</div>
                  </el-tooltip>
                  <div v-else class="remarks">--</div>
                  <img
                    v-if="hasRouteAuth(['mengli:inventory:remarkEdit', 'mengli:inventory:detailAdd'])"
                    :src="editIcon"
                    style="margin-left: 5px;width: 16px;height:16px;cursor: pointer;"
                    class="edit-icon"
                    @click="editDescDialogOpen(scope.row)">
                </div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="退货编号(系统)" min-width="210">
              <template slot-scope="scope">
                <el-tooltip v-if="scope.row.returnNum" class="item" placement="top" effect="dark">
                  <div slot="content" style="max-width: 200px;">{{ scope.row.returnNum }}</div>
                  <div
                    v-if="hasRouteAuth('mengli:afterSale:read')"
                    class="ellipsis link"
                    @click="goAfterSaleDetail(scope.row.returnOrderId)">
                    {{ scope.row.returnNum }}
                  </div>
                  <div v-else class="ellipsis">{{ scope.row.returnNum }}</div>
                </el-tooltip>
                <div v-else>--</div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="入库时间" min-width="165" sortable="custom" prop="inventoryTime">
              <template slot-scope="scope">
                <span v-if="scope.row.inventoryTime">{{ scope.row.inventoryTime | standardFormat('YYYY/MM/DD HH:mm:ss') }}</span>
                <span v-else>--</span>
              </template>
            </u-table-column>
            <u-table-column align="left" label="创建时间" min-width="165" sortable="custom" prop="createTime">
              <template slot-scope="scope">
                <span v-if="scope.row.createTime">{{ scope.row.createTime | standardFormat('YYYY/MM/DD HH:mm:ss') }}</span>
                <span v-else>--</span>
              </template>
            </u-table-column>
            <u-table-column align="left" label="创建人" min-width="100">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.creator" />
              </template>
            </u-table-column>
            <u-table-column align="left" width="100" label="操作" fixed="right">
              <template slot-scope="scope">
                <div style="display:flex">
                  <div class="button-text" @click="goDetail(scope.row.relatedId)">查看</div>
                  <!-- 售后单的stokeType为10 -->
                  <template v-if="scope.row.stockType === 10">
                    <div v-if="hasRouteAuth('mengli:inventory:stockTake')" class="el-dropdown-link">
                      <el-button
                        :disabled="scope.row.returnOrderStatus === 1"
                        type="text"
                        class="button-text"
                        @click.native="showTakeStockDialog(scope.row)">
                        <span style="font-size: 14px">处理</span>
                      </el-button>
                    </div>
                  </template>
                  <template v-else>
                    <el-dropdown v-if="hasRouteAuth(['mengli:inventory:detailAdd', 'mengli:inventory:delete'])" trigger="click">
                      <div class="el-dropdown-link">
                        <div class="button-text">更多<i class="el-icon-arrow-down"/></div>
                      </div>
                      <el-dropdown-menu slot="dropdown" class="dropdown-wrap">
                        <!--手动添加-->
                        <el-dropdown-item
                          v-if="hasRouteAuth('mengli:inventory:detailAdd')"
                          :disabled="beforeLastMonth(scope.row.inventoryTime)"
                          @click.native="showStockOperationDialog(scope.row)">
                          <div>编辑</div>
                        </el-dropdown-item>
                        <el-dropdown-item
                          v-if="hasRouteAuth('mengli:inventory:delete')"
                          :disabled="beforeLastMonth(scope.row.inventoryTime) || scope.row.isLock === 1"
                          @click.native="deleteList(scope.row)">
                          <div>删除</div>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
                </div>
              </template>
            </u-table-column>
          </u-table>
          <empty-placeholder v-else-if="!list.isInit" style="margin-bottom: 24px" />
        </div>
        <el-row v-if="showMobilePage" type="flex" justify="left">
          <el-pagination
            v-show="list.total > 0"
            :current-page="list.page"
            :page-size="list.perPage"
            :total="list.total"
            :page-sizes="[20, 50, 100, 250, 500]"
            :layout="pageLayout"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </el-row>
        <fixed-pagination>
          <template v-if="showMobilePage">
            <FilterInput
              v-model="filterInput"
              :filter-list="filterList"
              show-search-btn
              show-mobile-icon
              class="FilterTool"
              @handelClick="queryClick"
              @queryEmpty="queryEmpty"
              @filterTagStatus="filterTagStatus" >
              <div slot="checkGroup">
                <el-checkbox v-model="isDefective" style="margin-right: 20px;" @change="queryClick" >残次品</el-checkbox>
                <el-checkbox v-model="isPending" @change="queryClick" >待盘点</el-checkbox>
              </div>
            </FilterInput>
            <MoreOpeator
              ref="btnGroupRef"
              :list="[{
                label:'导入库存',
                importApi:'/admin/mengli/inventory/list/inventoryLog/import',
                callback:fetchData,
                type: 'import',
                auth: hasRouteAuth('mengli:inventory:import')
              }, {
                label:'导出库存',
                exportApi:'/admin/mengli/inventory/detail/log/export',
                exportName:'入库记录',
                refName: 'exportRef',
                isBeforeExport: true,
                beforeExport: beforeExport,
                type: 'export',
                auth: hasRouteAuth('mengli:inventory:export')
              }, {
                label: '模板下载',
                type: 'export',
                exportApi:'/admin/mengli/inventory/list/inventoryLog/template',
                exportName: '导入模板'
              }]"
              show-mobile-icon
            />
            <createBtn
              v-if="hasRouteAuth('mengli:inventory:detailAdd')"
              text="添加"
              mobile-table
              @click.native="showStockOperationDialog(null)"/>
          </template>
          <template v-else>
            <div style="flex:1;"/>
            <el-pagination
              v-show="list.total > 0"
              :current-page="list.page"
              :page-size="list.perPage"
              :total="list.total"
              :page-sizes="[20, 50, 100, 250, 500]"
              layout="total, prev, pager, next, sizes, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </template>
        </fixed-pagination>
      </div>
    </div>
    <editDescDialog
      ref="editDescDialog"
      v-model="currEditDescContent"
      @handleDescEdit="handleDescEdit"
    />
    <stockOperationDialog ref="stockOperationRef" @successCallback="queryEmpty" />
    <takeStockDialog ref="takeStockRef" @successCallback="queryEmpty" />
  </div>
</template>

<script>
import setting from '@/assets/setting.png';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import ImportButton from '@/components/ImportButton';
import ExportButton from '@/components/ExportButton';
import dataDisplay from '@/components/Common/baseComponent/dataDisplay';
import createBtn from '@/components/Common/baseComponent/createBtn';
import MoreOpeator from '@/components/Common/baseComponent/moreOpeator';
import stockOperationDialog from './components/stockOperationDialog';
import takeStockDialog from './components/takeStockDialog';
import editDescDialog from './components/editDescDialog';
import Title from '@/components/Title';
import ListTab from '@/components/ListTab';
import {
  deleteInventoryListLog,
  getInventoryListLog,
  getInventoryListLogCount,
  getInventoryRepo,
  editInventoryRemark
} from '@/api/mengli';
import { standardFormat } from '@/filters/date';
import { isNumberEmpty } from '@/filters/number';
import { hasRouteAuth } from '@/utils/permission';
import { paramsRangeFormat } from '@/utils/paramsFormat';
import { showModal } from '@/utils/message';
import TableAdaptive from '@/mixins/tableAdaptive';
import { handleTabChange, tabListData, getSkuDiffNumFunc } from './utils';
import editIcon from '@/assets/medium/edit-remark.png';
import icon1 from '@/assets/mengli/inventory/icon1.png';
import icon4 from '@/assets/mengli/inventory/icon4.png';
import mobileTable from '@/mixins/mobileTable';

export default {
  filters: {
    standardFormat,
    isNumberEmpty,
    hasCostFilter(val) {
      if (!val && val !== 0) return '--';
      const hasCostTypes = ['否', '是'];
      return hasCostTypes[val];
    }
  },
  components: {
    ImportButton,
    ListTab,
    Title,
    EmptyPlaceholder,
    dataDisplay,
    createBtn,
    MoreOpeator,
    stockOperationDialog,
    takeStockDialog,
    editDescDialog,
    ExportButton
  },
  mixins: [TableAdaptive, mobileTable],
  data() {
    return {
      icon1,
      icon4,
      editIcon,
      activeId: '1',
      tabListData,
      setting,
      repositoryOptions: [],
      filterInput: {},
      list: {
        items: [],
        page: 1,
        perPage: 20,
        total: 0,
        isInit: true
      },
      listCount: {
        totalCost: null,
        totalInventoryCount: null
      },
      currOperationId: null,
      currEditDescContent: '',
      listLoading: true,
      page: 1,
      perPage: 20,
      sortType: '',
      sortName: '',
      isDefective: false,
      isPending: false
    };
  },
  computed: {
    uploadParams() {
      const params = JSON.parse(JSON.stringify(this.filterInput));
      return { ...params };
    },
    filterList() {
      return [
        { keyword: 'code', name: 'SKU编码', type: 'input', labelWidth: '110px' },
        { keyword: 'title', name: '标题', type: 'input' },
        { keyword: 'type', name: '商品属性', type: 'input', labelWidth: '110px' },
        { keyword: 'supplier', name: '供应商', type: 'input' },
        { keyword: 'ipName', name: 'IP形象', type: 'input', labelWidth: '110px' },
        { keyword: 'ipSeriesName', name: 'IP系列', type: 'input' },
        { keyword: 'returnNum', name: '退货编号(系统)', type: 'input', labelWidth: '110px' },
        { keyword: 'repositoryId', name: '仓库', type: 'select', options: this.repositoryOptions },
        { keyword: 'inventoryTime', name: '入库时间', type: 'rangeDate', format: 'yyyy/MM/dd HH:mm:ss' },
        { keyword: 'createTime', name: '创建时间', type: 'rangeDate', format: 'yyyy/MM/dd HH:mm:ss', labelWidth: '110px' }
      ];
    },
    rangeKeyArr() {
      return [{
        attr: 'createTime',
        start: 'createStart',
        end: 'createEnd',
        type: 'time'
      }, {
        attr: 'inventoryTime',
        start: 'inventoryStart',
        end: 'inventoryEnd',
        type: 'time'
      }];
    },
    tableOutsideHeight() {
      return this.showMobilePage ? 248 : 254;
    },
    displayData() {
      return [
        { data: this.listCount.totalCost, label: '成本价', icon: icon4 },
        { data: this.listCount.totalInventoryCount, label: '入库数量', icon: icon1, isMoney: false }
      ];
    }
  },
  created() {
    getSkuDiffNumFunc();
    this.formatQuery();
    this.fetchData(true);
    this.getInventoryRepo();
  },
  methods: {
    hasRouteAuth,
    sortMethod(a) {
      if (a.order) {
        this.sortName = a.prop;
        this.sortType = a.order === 'ascending' ? 1 : -1;
      } else {
        this.sortName = '';
        this.sortType = '';
      }
      this.queryClick();
    },
    mapKey(data) {
      const arr = [];
      data.map(item => {
        const arrItem = {
          value: item.repositoryId,
          label: item.repositoryName
        };
        arr.push(arrItem);
      });
      return arr;
    },
    beforeLastMonth(date) {
      if (!date) return;
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth();
      // 截止操作日期至上个月
      const deadline = new Date(year, month - 1, 1, 0, 0, 0).getTime();
      return date * 1000 < deadline;
    },
    getInventoryRepo() {
      const params = {
        page: 1,
        perPage: 999
      };
      getInventoryRepo(params).then(res => {
        this.repositoryOptions = this.mapKey(res.data.items);
      }).catch(err => {
        console.log(err);
        this.$message({ type: 'error', message: err.message });
      });
    },
    getInventoryListLogCount(params) {
      getInventoryListLogCount(params).then(({ data }) => {
        this.listCount = data;
      }).catch(e => {
        console.error(e);
      });
    },
    // 导出
    beforeExport() {
      const params = this.formatParams();
      this.$refs['btnGroupRef'] && this.$refs['btnGroupRef'].btnExport(params, 'exportRef');
    },
    getStockType(data) {
      // 售后类型 stockType：10-退货订单，且returnOrderStatus：0（待盘点），1（已入库）
      const { stockType, stockTypeName, returnOrderStatus } = data;
      if (stockType === 10) {
        return `${stockTypeName}(${returnOrderStatus === 0 ? '待盘点' : '已入库'})`;
      } else {
        return stockTypeName || '--';
      }
    },
    formatQuery() {
      const { code, repositoryId, isPending } = this.$route.query;
      this.$set(this.filterInput, 'code', code);
      this.$set(this.filterInput, 'repositoryId', repositoryId && Number(repositoryId));
      this.isPending = !!isPending;
    },
    formatParams() {
      const params = JSON.parse(JSON.stringify(this.filterInput));
      paramsRangeFormat(this.rangeKeyArr, params);
      params.page = this.page;
      params.perPage = this.perPage;
      params.sortName = this.sortName;
      params.sortType = this.sortType;
      params.isDefective = this.isDefective;
      params.isPending = this.isPending;
      return params;
    },
    fetchData(reset = false) {
      if (reset) this.page = 1;
      const params = this.formatParams();
      this.listLoading = true;
      getInventoryListLog(params).then(({ data }) => {
        this.list = data;
        this.list.isInit = false;
        this.listLoading = false;
      }, result => {
        this.listLoading = false;
      }).catch(e => {
        console.error(e);
      });
      this.getInventoryListLogCount(params);
    },
    queryClick() {
      this.fetchData(true);
    },
    queryEmpty() {
      this.filterInput = {};
      this.isDefective = false;
      this.isPending = false;
      this.queryClick();
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData(true);
      this.$nextTick(() => {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      });
    },

    handleCurrentChange(toPage) {
      this.page = toPage;
      this.fetchData();
      this.$nextTick(() => {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      });
    },
    goDetail(id) {
      this.$router.push({
        name: 'mengliInventoryDetail',
        params: {
          id: id
        }
      });
    },
    goMengliSuppliers(name) {
      const routeUrl = this.$router.resolve({
        name: 'mengliSuppliers',
        query: { keyword: name }
      });
      window.open(routeUrl.href, '_blank');
    },
    goContractManagement(name) {
      const routeUrl = this.$router.resolve({
        name: 'ContractManagement',
        query: { oppCompany: name }
      });
      window.open(routeUrl.href, '_blank');
    },
    goAfterSaleDetail(id) {
      if (!id) {
        this.$message.warning('无法跳转至售后详情');
        return;
      }
      const routeUrl = this.$router.resolve({
        name: 'mengliOrderDetail',
        params: { id },
        query: { type: 3 }
      });
      window.open(routeUrl.href, '_blank');
    },
    deleteList(item) {
      const params = { id: item.id };
      showModal('是否确定删除', '', {}).then(_ => {
        this.deleteInventoryLog(params);
      }).catch(_ => null);
    },
    deleteInventoryLog(params) {
      deleteInventoryListLog(params).then(_ => {
        this.$message.success('删除成功');
        this.fetchData(true);
      }).catch(err => {
        console.log(err);
      });
    },
    editDescDialogOpen(rowData) {
      this.currOperationId = rowData.id;
      this.currEditDescContent = rowData.remark;
      this.$refs['editDescDialog'].dialogVisible = true;
    },
    // 编辑说明
    handleDescEdit() {
      const params = {
        id: this.currOperationId,
        remark: this.currEditDescContent
      };
      this.listLoading = true;
      editInventoryRemark(params).then(res => {
        this.listLoading = false;
        if (res.code === 200) {
          this.$message.success('编辑成功');
          this.fetchData();
        }
      }).catch(_ => {
        this.listLoading = false;
      });
    },
    handleTabClick(id) {
      handleTabChange(id, this);
    },
    showStockOperationDialog(rowData) {
      this.$refs['stockOperationRef'].initDialog(rowData);
    },
    showTakeStockDialog(rowData) {
      this.$refs['takeStockRef'].initDialog(rowData);
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-dropdown-link {
  display: block;
  position: relative;
  padding-left:6px;
  margin-left: 6px;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -7px;
    width: 1px;
    background: #ddd;
    height: 14px;
  }
}
.dropdown-wrap {
  margin-top: -24px;
  margin-right: 15px;
  padding: 0;
  .el-dropdown-menu__item {
    width: 80px;
    text-align: center;
  }
}
.product-container {
  margin: 16px 16px 0 16px;
  background-color: #fff;
  padding: 20px 20px 55px 20px;
  .current-user-action-box {
    position: absolute;
    left: 488px;
    top: 6px;
    display:flex;
    align-items:center;
  }
}
.remarks-container {
  display: flex;
  align-items: center;
  text-align: left;
  &.center {
    justify-content: center;
  }
  .remarks {
    font-size: 14px;
    overflow:hidden;
    text-overflow:ellipsis;
    word-break:break-all;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    line-clamp: 5;
    -webkit-line-clamp: 5;
  }
  .icon {
    margin-left: 5px;
    font-size: 13px;
    cursor: pointer;
    color: #55a7d2;
    &.larger {
      font-size: 16px;
    }
  }
}
.link {
  color: #406eff;
  cursor: pointer;
}
.customer {
  & ::v-deep {
    .pointer {
      cursor: pointer;
    }
    .center-button {
      text-align: center;
      width: 100%;
    }
  }
}
</style>

